<template>
  <!-- 外部容器 -->
  <div class="outer-container">
    <!-- 可点击文字链接 (Element 风格) -->
    <el-link @click="goToHome" class="home-link">股票行家首页</el-link>

    <!-- 图片容器 -->
    <div class="image-container">
      <img src="/images/logo4.png" alt="Logo" class="logo1" />
    </div>

    <!-- 修改密码容器 -->
    <div class="register-container">
      <el-form label-width="100px" class="register-form">
        <el-form-item label="手机号" :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }]">
          <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>

        <el-form-item label="短信验证码" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-input v-model="form.smsCode" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button @click="sendSmsCode" v-if="controlSendPhoneConfirm===false" style="width: 100%;" size="small">获取验证码</el-button>
              <div v-if="controlSendPhoneConfirm===true">{{cunt_time}}</div>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="新密码" :rules="[{ required: true, message: '请输入新密码', trigger: 'blur' }]">
          <el-input v-model="form.password" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>

        <el-form-item label="确认密码" :rules="[{ required: true, message: '请确认密码', trigger: 'blur' }]">
          <el-input v-model="form.confirmPassword" placeholder="请确认密码" show-password></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="width: 100%;">确认修改密码</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 导入router模块
import { ElMessage } from 'element-plus';
import {findLostAccountService, getConfirmCodeService} from "@/api/request.js";
    const router = useRouter(); // 获取router实例

    const form = ref({
      phone: null,
      smsCode: null,
      password: null,
      confirmPassword: null
    });

    let controlSendPhoneConfirm=ref(false)
    let cunt_time=ref(60)
    const sendSmsCode = () => {
      if (form.value.phone === null) {
        ElMessage.error('手机号不能为空！');
        return;
      }
      controlSendPhoneConfirm.value=true
      getConfirmCodeService(form.value.phone)
      let timer = setInterval(() => {
        cunt_time.value--;
        if (cunt_time.value === 0) {
          clearInterval(timer);
          controlSendPhoneConfirm.value = false;
          cunt_time.value = 60;
        }
      }, 1000);
    };

    const onSubmit = async () => {
      // 在这里可以添加实际的逻辑来处理密码修改
      if(form.value.phone===null&&form.value.smsCode===null&&form.value.password===null){
        ElMessage.error('请填写完整信息');
        return;
      }
      if (form.value.password !== form.value.confirmPassword) {
        ElMessage.error('两次输入的密码不一致！');
        return;
      }
      await findLostAccountService(form.value.phone, form.value.password, form.value.smsCode)
      ElMessage.success('密码修改成功！');
      await router.push({path: '/login'}); // 跳转到登录页面
    };

    // 跳转到首页的方法
    const goToHome = () => {
      router.push({ path: '/' }); // 跳转到首页
    };
</script>

<style scoped>
/* 外部容器，用于居中整体布局，并设置灰色底色 */
.outer-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f7f7f7; /* 灰色底色 */
  padding: 30px; /* 容器边距 */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 650px; /* 扩大容器宽度 */
  overflow: hidden; /* 确保滚动条不会干扰 */
}

/* 可点击的文字链接样式 */
.home-link {
  position: absolute; /* 绝对定位以移动到右上角 */
  top: 15px; /* 距离上边距 */
  right: 20px; /* 距离右边距 */
  font-size: 14px; /* 文本大小 */
  color: #409EFF; /* Element Plus 标准链接颜色 */
}

/* 注册容器样式 */
.register-container {
  padding: 40px 60px; /* 扩大内边距，留出两端空隙 */
  border-radius: 8px;
  background-color: #fff;
}

/* 图片样式 */
.logo1 {
  width: 300px;
  height: 90px;
  margin-bottom: 20px; /* 增大底部间距以适应布局变化 */
}

/* 统一行间距 */
.el-row,
.el-form-item {
  margin-bottom: 20px;
}

/* 保持列布局的一致性 */
.el-col {
  display: flex;
  align-items: center;
}

/* 清理表单内容的最大宽度 */
.register-form {
  max-width: 100%;
}
</style>
